<template>
  <div>
      <div>
        <p class="fwbold fs-md mg20">· 服务商入驻申请</p>
        <el-divider></el-divider>
      </div>
      <div class="ServiceCompanyApply">
        <div v-if="!isShowDetail">
          <el-tabs type="border-card" v-model="activeIndex" style="flex: 1;" @tab-click="onTabClick">
            <el-tab-pane v-for="(value, index) in tablist" :key="value.dictValue" :label="value.dictLabel" :name="value.dictValue">
              <div class="list-wrap" v-if="dataList.length > 0">
                <div class="list-item" v-for="(item, index2) in dataList" :key="index2">
                  <div class="icon-wrap">
                    <i class="iconfont icon-qitafuwu color-grey"></i>
                  </div>
                  <div class="info-wrap">
                    <div class="info-title">{{ item.applyTypeName }}</div>
                    <div class="mt10 color-grey">{{item.supplierTypeDesc}}</div>
                    <div class="info-time color-grey">
                      <span>申报有效期：{{ item.validBeginTime | timeFilter}}~ {{ item.validEndTime | timeFilter}}</span>
                      <div class="status-tag" :class="statusClass(item.status)"> {{statusDescription(item.status)}}<span v-if="item.status == 2 || item.status == 3" class="ml10">：{{item.comment}}</span></div>
                    </div>
                  </div>
                  <div class="btn-wrap">
                    <el-button type="primary" size="medium" class="btn" @click="goToDetail(item)">{{(item.status === '-1') ? '申请入驻' : '查看详情'}}</el-button>
                  </div>
                </div>
              </div>
              <div v-else>
                <el-empty 
                    :image-size="200" 
                    :description="userInfo.isAuth == 0 ? '暂无申请，请先完善企业认证' : '暂无申请'"
                ></el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-else>
          <ServiceCompanyDetail @back="goBack" :applyTypeId="currentApplyTypeId"  :serviceApplyId="currentServiceApplyId" ></ServiceCompanyDetail>
        </div>
      </div>
        <el-dialog title="服务商入驻申请" :visible.sync="tipVisible" width="525px" custom-class="my-dialog">
          <p style="margin-top: -10px;">需要完成<span
              style="color: #436AF7;">“支付信息认证”</span>才可进行“申请入驻”的操作，请先完成认证。</p>
          <div style="text-align: right;margin-top: 40px;">
            <el-button type="info" size="medium" @click="tipVisible = false">暂不认证</el-button>
            <el-button type="primary" size="medium" class="blue-btn"
              @click="() => { tipVisible = false; goToAuth() }">前往认证</el-button>
          </div>
        </el-dialog>
        <el-dialog title="服务商入驻申请" :visible.sync="compeletVisible" width="525px" custom-class="my-dialog">
          <p style="margin-top: -10px;">需要完善<span
              style="color: #436AF7;">“服务商信息”</span>才可进行“申请入驻”的操作，请先去完善。</p>
          <div style="text-align: right;margin-top: 40px;">
            <el-button type="info" size="medium" @click="compeletVisible = false">暂不完善</el-button>
            <el-button type="primary" size="medium" class="blue-btn"
              @click="() => { compeletVisible = false; $router.push({name: '服务商信息'}) }">前往完善</el-button>
          </div>
        </el-dialog>
        <el-dialog title="请前往小程序制作签章" :visible.sync="signVisible" width="525px" custom-class="my-dialog">
             <div class="row-spaceb pt20 pl50 pr50">
                <div>
                    <div style="width: 43px;height: 5px;background: #436AF7;"></div>
                    <div class="mt20">需要使用微信扫码</div>
                    <div class="mt10"> 登录 <span class="color-primary">广西桂在益企小程序</span></div>
                    <div class="mt10">在个人中心页完成 <strong class="color-primary">制作签章 ！</strong></div>
                    <div class="mt10">制作签章完成后请刷新当前页面</div>
                </div>
             <div>
               <img src="@/assets/image/miniCode.jpg" class="ml30"  alt="face" style="width: 149px;height: 149px;" />
             </div>
          </div>
          <div style="text-align: right;margin-top: 40px;">
            <el-button type="info" size="medium" @click="signVisible = false">确认</el-button>
          </div>
        </el-dialog>
  </div>
</template>
<script>
import ServiceCompanyDetail from "./serviceCompanyDetail.vue";
import { serviceApplyList, getSignStatus} from '@/api/homeApi'
import { mapGetters } from 'vuex'
import moment from 'moment';

export default {
  filters: {
    timeFilter: function (value) {
      return moment(value).format('yyyy年MM月DD日');
    }
  },
  components: {
    ServiceCompanyDetail,
  },
  data() {
    return {
      //0-全部 1-待提交 2-待审核 3-审核通过 4-审核不通过 5-退回修改
      activeIndex: 'all',
      dataList: {

      },
      tablist:[ 
        {"dictLabel": "全部", "dictValue": "all"},
        {"dictLabel": "待申请","dictValue": "-1"},
        {"dictLabel": "待审核","dictValue": "0"},
        {"dictLabel": "审核通过","dictValue": "1"},
        {"dictLabel": "退回修改","dictValue": "2"},
        {"dictLabel": "审核不通过","dictValue": "3"}
      ],
      isShowDetail: false,
      companyApplyStatusDict: [],//服务商入驻审核状态
      currentServiceApplyId: '',
      currentApplyTypeId: '',
      tipVisible: false,
      compeletVisible: false,
      signVisible: false,
      companySealOk: false,
      legalSealOk: false
    }
  },
  computed: {
    ...mapGetters([
      'commonDict',
      'userInfo'
    ])
  },
  watch: {
    // companyApplyStatusDict: {
    //   immediate: false,
    //   deep: true,
    //   handler(newValue, oldValue) {
    //     for (let i = 0; i < newValue.length; i++) {
    //       const item = newValue[i];
    //       this.dataList[item.dictLabel] = {
    //         status: item.dictValue,
    //         data: []
    //       }
    //     }
    //     console.log('this.dataList', this.dataList);
    //   }
    // }
  },
  created() {
    if (this.commonDict.length === 0) {
      this.$store.dispatch('getCommonDict').then(() => {
        for (const item of Object.values(this.commonDict)) {
          if (item.dictType === 'sme_company_settle_apply_status2') {
            this.companyApplyStatusDict.push(...item.dictData)
          }
        }
      })
    }else{
      for (const item of Object.values(this.commonDict)) {
          if (item.dictType === 'sme_company_settle_apply_status2') {
            this.companyApplyStatusDict.push(...item.dictData)
          }
        }
    }
  },
  mounted() {
      this.getServiceApplyList('');
      getSignStatus().then(res=>{
          if(res.code === 200){
          this.companySealOk = res.data.companySealOk,
          this.legalSealOk = res.data.legalSealOk
          }
      })
    },
  methods: {
    goToAuth(){
      this.$router.push({name: '个人中心'})
    },
    statusDescription(status) {
      const statusItem = this.companyApplyStatusDict.find(item => item.dictValue === status);
      return statusItem ? statusItem.dictLabel : '未知状态';
    },
    getServiceApplyList(status = '') {
      serviceApplyList({ status: status }).then(res => {
        if (res.code === 200) {
          this.dataList = res.data
        } else {
          this.dataList = []
        }
      })
    },
    goToDetail(item) {
    /*
      if(item.status === '-1'){
        // 提示：服务商申请入驻的有效期已结束，无法申请入驻
        this.$message({
          message: '服务商申请入驻的有效期已结束，无法申请入驻',
          type: 'error'
        });
        return
      } */
      if(!this.userInfo.isPayAuth){
         this.tipVisible = true
      } else if(!this.userInfo.isServiceInfoComplete){
         this.compeletVisible = true
      } else {
        this.currentServiceApplyId = item.serviceApplyId;
        this.currentApplyTypeId = item.applyTypeId,
        this.isShowDetail = true;
      }
    },
    goBack() {
      this.isShowDetail = false;
      this.getServiceApplyList('');
    },
    onTabClick(val) {
      console.log('onTabClick', val);
      if (val.name === 'all') {
        this.getServiceApplyList('')
      } else {
        this.getServiceApplyList(val.name)
      }
    },
   statusClass(status) {
      switch (status) {
        case '0':
          return 'blue';
        case '1':
          return 'green';
        case '-1': 
        case '2':
        case '3':
          return 'orange';
        default:
          return '';
      }
    },
    statusFormat(val,type='name'){
      let target = this.companyApplyStatusDict.find(v => v.dictValue === val)
      let statusName = target?.dictLabel
      let color=''
      switch (val) {
        case 0:
          color='blue'
          break;
          case 1:
          color='green'
          break;
          case 2:
          color='orange'
          break;
          case 3:
          color='orange'
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.ServiceCompanyApply {
  display: flex;
  flex-direction: column;
  padding: 15px 40px 30px;
  height: 100%;

  ::v-deep .el-tabs__item {
    min-width: 120px;
    text-align: center;
  }
  .list-wrap {
    padding: 15px;

    .list-item {
      display: flex;
      align-items: center;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);

      &+.list-item {
        margin-top: 20px;
      }

      .icon-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 97px;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 10%;
          display: block;
          width: 1px;
          height: 80%;
          background-color: #E8E8E8;
        }

        i {
          font-size: 40px;
        }
      }

      .info-wrap {
        padding: 0 20px 0 30px;
        flex: 1;

        .info-title {
          margin-top: 15px;
          font-size: 16px;
          font-weight: bold;
          word-wrap: break-word;
          word-break: break-all;
        }

        .info-time {
          display: flex;
          align-items: flex-end;
          margin-bottom: 14px;
          font-size: 14px;

          .status-tag {
            margin-left: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 63px;
            height: 27px;
            border-radius: 3px;
            font-size: 14px;

            &.green {
              color: $--color-success;
              background: rgba(3, 194, 153, 0.1);

            }

            &.orange {
              color: $--color-danger;
              background: rgba(250, 83, 48, 0.1);
            }
            &.blue {
              color: $--color-primary;
              background: rgba(67, 106, 247, 0.2)
            }
          }
        }
      }

      .btn-wrap {
        padding-right: 30px;

        .btn {
          min-width: 142px;
        }
      }
    }
  }
}
</style>
